<template>
  <div class="counte">
    <div class="title_bread">
      <span>技术栈</span> <span>/ Technology stack</span>
    </div>
    <div v-if="!this.show" class="map" id="customerChart"></div>
    <div v-if="this.show"><img :src="this.imgSrc" /></div>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

export default {
  name: "Comment",
  setup() {
    const imgSrc = ref();
    const myChart = ref();
    const show = ref(false);
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      myChart.value = echarts.init(document.getElementById("customerChart"));
      // 绘制图表
      myChart.value.setOption({
        legend: {
          show: false,
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "熟练度",
            type: "pie",
            radius: [50, 180],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 2,
            },
            data: [
              { value: 40, name: "vue" },
              { value: 45, name: "vue3" },
              { value: 30, name: "react" },
              { value: 35, name: "react hooks" },
              { value: 50, name: "html" },
              { value: 50, name: "css" },
              { value: 50, name: "javascript" },
              { value: 40, name: "videojs" },
              { value: 37, name: "rrweb" },
            ],
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        myChart.value.resize();
      };
    });
    window.onload = () => {
      imgSrc.value = myChart.value.getDataURL("png");
      show.value = true;
    };
    return { imgSrc, show };
  },
};
</script>

<style scoped>
.map {
  height: 400px;
  width: 100%;
}
</style>
